<template>
  <div>

    <div class="c_top">
      <el-row class="demo-avatar demo-basic">
        <el-col :span="12" style="margin-top: 120px;margin-left: 20px">
          <div class="demo-basic--circle">
            <div class="block">
              <el-avatar :size="50" :src="circleUrl" @click="" style="cursor:pointer"></el-avatar>

              <div style="float: right;margin-right: 520px;margin-top: -50px">
              <span style="margin-left: 25px;color: white">{{username}}</span><br>
              <span style="margin-left: 25px;color: white">{{sign}}</span>
              </div>
            </div>

          </div>
        </el-col>
      </el-row>


      <el-menu
          :router="true"
          :default-active="$router.path"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="rgb(10, 0, 0)"
          text-color="#fff"
          active-text-color="white"

      >
        <!--      <div style="position:absolute;width: 5%;height: 100%;top: 0px">-->
        <!--        <img class="img_logo" src="../assets/tour2.png" alt="logo">-->
        <!--      </div>-->
        <el-menu-item index="/head/home" style="margin-left: 0px">我的攻略</el-menu-item>

        <el-menu-item index="/head/center/create">创作攻略</el-menu-item>

        <el-menu-item index="/head/strategy">我的收藏</el-menu-item>

        <el-menu-item index="/head/strategy">路径规划</el-menu-item>

      </el-menu>
      <router-view></router-view>
    </div>

  </div>
</template>

<script>
import background from '@/assets/head.jpg'

export default {
  data() {
    return {
      circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      username:'',
      sign:''

    }
  },
  created() {
    this.username=localStorage.getItem('username')
    this.sign=localStorage.getItem('sign')
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },

  },


  mounted() {


  }


}
</script>

<style>
.c_top {
  background: url("../assets/background.jpg") no-repeat center;
  margin-top: 0px;
  margin-left: 85px;
  width: 90%;
  height: 185px;

}

</style>